<template>
  <div>
    <a-input placeholder="手机号查询" v-model="searchValue" @input="valueNull" @keypress.enter="search"/>
      <a-table 
      :rowKey="dataList => dataList.id"
      :data-source="dataList" 
      :columns="columns"
      :pagination="{
        defaultPageSize:3,
        showSizeChanger:true,
        pageSizeOptions:['3','5','10'],
        total:dataList.length
      }">
         <div slot="action" slot-scope="record">
            <a-button @click="del(record.id)">删除</a-button>
            <a-button @click="exit(record)">编辑</a-button>
          </div>
      </a-table>
        <div>
          <a-modal v-model="visible" title="修改个人信息" @ok="handleOk">
            <a-input v-model="updateItem.name" placeholder="修改姓名"/>
            <a-input v-model="updateItem.phone" placeholder="修改电话"/>
          </a-modal>
        </div>
  </div>
</template>

<script>
export default {
  data(){
    return {
      dataList:[],
      cobyList:[],
      pageSize:3,
      searchValue:'',
      visible: false,
      updateItem:[],
      columns : [
        {
          title: '商品名称',
          dataIndex: 'name',
          width: '10%',
        },
        {
          title: '手机号',
          dataIndex: 'phone',
          width: '30%',
        },
        {
          title: '配送方式',
          dataIndex: 'delivery_mode.text',
          width: '15%',
        },
        {
          title: '距离',
          dataIndex: 'distance',
          width: '15%',
        },
        {
          key:"id",
          title: '操作',
          width: '30%',
          scopedSlots: { customRender: 'action' },
        },
      ],
    }
  },
  mounted(){
    this.$axios.get("shopList(1).json").then(res=>{
      console.log(res.data)
      this.dataList = res.data
      this.cobyList = res.data
    })
  },
  methods:{
    search(){
      this.dataList = []
      this.cobyList.forEach(el=>{
        if(el.phone.includes(this.searchValue)){
          this.dataList.push(el)
        }
      })
    },
    valueNull(){
      if(this.searchValue.length === 0){
        this.dataList = this.cobyList
      }
    },
    del(id){
      this.cobyList.forEach((el,index)=>{
        if(el.id === id){
          this.dataList.splice(index,1)
        }
      })
    },
    exit(item){
      this.updateItem = item
      this.visible = true;
    },
    handleOk(e) {
      console.log(e);
      this.visible = false;
    },
  }
}
</script>

<style>

</style>